<template>
  <div>
    <!-- 批量操作按钮 -->
    <div style="margin-bottom: 10px;">
      <el-button type="primary" size="mini" @click="batchApprove" :disabled="!selectedCourses.length">批量批准</el-button>
      <el-button type="danger" size="mini" @click="batchReject" :disabled="!selectedCourses.length">批量拒绝</el-button>
    </div>

    <!-- 课程列表 -->
    <el-table :data="courses" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="course_id" label="课程ID" width="80"></el-table-column>
      <el-table-column prop="course_code" label="课程代码"></el-table-column>
      <el-table-column prop="course_name" label="课程名称"></el-table-column>
      <el-table-column prop="course_description" label="课程描述"></el-table-column>
      <el-table-column prop="course_approval_status" label="审批状态"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              v-if="scope.row.course_approval_status === 'pending'"
              @click="approveCourse(scope.row.course_id)"
          >批准</el-button>
          <el-button
              size="mini"
              type="danger"
              v-if="scope.row.course_approval_status === 'pending'"
              @click="rejectCourse(scope.row.course_id)"
          >拒绝</el-button>
          <el-tag
              v-if="scope.row.course_approval_status === 'pass'"
              type="success"
          >已批准</el-tag>
          <el-tag
              v-if="scope.row.course_approval_status === 'rejected'"
              type="danger"
          >已拒绝</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import { getPendingCourses } from '@/api/adminGetCoursesPending';  // 引入获取待审批课程的 API 函数
import axios from '@/utils/request';
export default {
  data() {
    return {
      courses: [],  // 存储待审批的课程
      selectedCourses: [],  // 存储选中的课程
    };
  },
  methods: {
    // 获取待审批课程列表
    async fetchPendingCourses() {
      try {
        const response = await axios.get('/admin/getCoursesPending');
        this.courses = response.data;  // 将返回的数据存入 courses 数组
      } catch (error) {
        this.$message.error('加载课程列表失败');
        console.error(error);
      }
    },
    // 批量批准
    async batchApprove() {
      const courseIds = this.selectedCourses.map(course => course.course_id);
      try {
        const response = await axios.post('/admin/setCoursesApprove', { courseIds });
        this.$message.success(response.data.message);
        await this.fetchPendingCourses();  // 重新加载课程列表
      } catch (error) {
        this.$message.error('批量批准课程失败');
        console.error(error);
      }
    },
    // 批量拒绝
    async batchReject() {
      const courseIds = this.selectedCourses.map(course => course.course_id);
      try {
        const response = await axios.post('/admin/setCoursesReject', { courseIds });
        this.$message.warning(response.data.message);
        await this.fetchPendingCourses();  // 重新加载课程列表
      } catch (error) {
        this.$message.error('批量拒绝课程失败');
        console.error(error);
      }
    },

    // 批量操作时的选中课程变更
    handleSelectionChange(val) {
      this.selectedCourses = val;
    },

    // 单个课程批准
    async approveCourse(courseId) {
      try {
        const response = await axios.post('/admin/setCoursesApprove', { courseIds: [courseId] });
        this.$message.success(response.data.message);
        console.log(response.data)
        this.$message({
          message:'批准课程成功',
          type: 'success',
          offset: '80'
        });
        await this.fetchPendingCourses();  // 更新课程列表
      } catch (error) {
        this.$message.error('批准课程失败');
        console.error(error);
      }
    },

    // 单个课程拒绝
    async rejectCourse(courseId) {
      try {
        const response = await axios.post('/admin/setCoursesReject', { courseIds: [courseId] });
        this.$message.warning(response.data.message);
        console.log(response.data);
        this.$message({
          message:'该课程已被驳回',
          type: 'success',
          offset: '80'
        });
        await this.fetchPendingCourses();  // 更新课程列表
      } catch (error) {
        this.$message.error('拒绝课程失败');
        console.error(error);
      }
    },
  },
  created() {
    this.fetchPendingCourses();  // 组件加载时调用获取待审批课程的方法
  },
};
</script>

<style scoped>
.el-tag {
  margin-left: 5px;
}
</style>
